<template>
	<div class="flex flex-col items-center">
		<div class="mx-auto pt-6 px-10 text-center text-lg leading-[20px]">
			{{ $t('app.todoDesc') }}
		</div>
		<base-image src="todo-bg" class="mt-6 w-[250px]" />
		<base-image src="download/qr.png" class="mt-4 w-[150px]" />
		<base-image src="download/app-store" class="mt-3 w-[140px]" />
		<base-image src="download/google-play" class="mt-2 w-[140px]" />
		<div class="w-[430px] pt-8 pb-6">
			<base-button type="primary" @click="onClose">
				{{ $t('action.gotIt') }}
			</base-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { BaseImage, BaseButton } from '@/components/base'
import { useAppStore } from '@/store'

defineOptions({ name: 'ViewsAppTodo' })

const appStore = useAppStore()

const onClose = () => appStore.showTodo(false)
</script>
